<template>
  <div>
    <Logo title="欢迎登录" />
    <div class="login">
      <el-form ref="form" :model="form" label-width="auto">
        <el-form-item label="手机号">
          <el-input type="text" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <!-- 忘记密码 -->
        <div class="forget_password">
          <Forget />
        </div>
        <!-- 忘记密码 -->
        <el-form-item class="login_center">
          <el-button type="primary" round class="login_button" @click="getLoginQ">登录</el-button>
        </el-form-item>
        <div class="sign_center">
          <p>
            没有账号
            <router-link to="/newPronen">立即注册</router-link>
          </p>
        </div>
      </el-form>
    </div>
    <div>
      <Foot />
    </div>
  </div>
</template>

<script>
import Logo from "./logo";
import Forget from "./forget";
import Foot from "../componnet/qiantai/Foot";
import api from "../api";
import { mapMutations } from 'vuex'
export default {
  name: "Login",
  components: {
    Logo,
    Forget,
    Foot
  },
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    ...mapMutations("LoginModule",['setToken','setphone','setnew']),
    // 登录的事件函数
    getLoginQ() {
     if(this.form.username&&this.form.password){
        api
        .getLogin({
          phone: this.form.username,
          password: this.form.password
        })
        .then(res=>{
          // console.log(res)
          if(res.data.status==200){
            this.setToken(res.data.token)
            this.setphone(res.data.data[0].phone)
            this.setnew(res.data.data[0].new)
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('phone',res.data.data[0].phone)
            localStorage.setItem('new',res.data.data[0].new)
            this.$router.replace('/home')
          }else{
            this.$message.error(res.data.msg);
             
          }
        })
     }else{
       this.$message.error('用户名密码不能为空');
     }
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  width: 801px;
  height: 357px;
  margin: 30px auto;
  background-color: rgba(242, 242, 242, 1);
  border-radius: 0px;
  padding: 0 100px;
  box-sizing: border-box;
  padding-top: 50px;
  .login_center {
    text-align: center;
  }
  .login_button {
    width: 270px;
  }
  .sign_center {
    text-align: center;
  }
  .forget_password {
    text-align: right;
  }
}
</style>